<app-nav> </app-nav>
<app-spinner
  *ngIf="isRequesting"
  [delay]="300"
  [message]="'Minting Private Token'"
  [isRunning]="isRequesting"
></app-spinner>
<div class="container ">
  <div class="col-md-12">
    <nav class="mt-4" aria-label="breadcrumb">
      <ol class="breadcrumb">
        <li class="breadcrumb-item">
          <a [routerLink]="['/overview']">Overview</a>
        </li>
        <li class="breadcrumb-item active" aria-current="page">Mint {{ nftName }} Commitment</li>
      </ol>
    </nav>

    <div class="box">
      <div class="box-header">
        <h3>Mint {{ nftName }} Commitment</h3>
      </div>
      <div class="box-body" *ngIf="!tokenList.length">
        <div class="row form-group">
          <div class="col-sm-12">
            <p>Not Enough {{ nftName }} To Mint.</p>
          </div>
        </div>
      </div>
      <div class="box-body" *ngIf="tokenList.length">
        <div class="form-group" *ngIf="tokenList.length">
          <label for="name mb-1">Select Public Token</label>
          <div class="row col-sm-12">
            <ng-select
              #select
              [items]="tokenList"
              class="custom"
              [virtualScroll]="true"
              [loading]="loading"
              [multiple]="true"
              [(ngModel)]="selectedCommitmentList"
              [maxSelectedItems]="1"
              [searchFn]="customSearchFn"
              placeholder="Select Public Token"
              style="width:50%;"
            >
              <ng-template ng-label-tmp let-item="item">
                <span aria-hidden="true" class="ng-value-icon left" (click)="onRemove(item)"
                  >×</span
                >
                <b>{{ item.tokenUri }} </b> ({{ item.tokenId.slice(0, 20) }}...)&nbsp;
              </ng-template>
              <ng-template ng-option-tmp let-item="item" let-index="index">
                <b>{{ item.tokenUri }}</b> ({{ item.tokenId.slice(0, 20) }}...)
              </ng-template>
            </ng-select>
          </div>
        </div>

        <div class="col-md-12">
          <div class="row">
            <button
              class="btn btn-md btn-primary"
              [disabled]="!selectedCommitmentList.length"
              type="button"
              (click)="mintNFTCommitment()"
            >
              Mint {{ nftName }} Commitment
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
